<template>
  <div id="amap-container">
    <el-input
      id="search-input"
      v-model="searchValue"
      class="input-with"
      placeholder="请输入地址"
      clearable
      @clear="handelclearInput"
      @keyup.native.enter="handelSearch"
    >
      <el-button
        slot="append"
        size="small"
        type="primary"
        icon="el-icon-search"
        @click="handelSearch"
      >搜索</el-button
      >
    </el-input>

    <div id="searchResultPanel" />
    <el-row class="margin-top-10 address">
      当前地址是： {{ formattedAddress }} {{position}}
      <el-button size="small" type="primary" @click="handelSave"
      >使用该地址</el-button
      >
    </el-row>

    <div id="custom-amap" />
  </div>
</template>

<script>
  const AMap = window.AMap;
  export default {
    name: 'AMap',
    props: {
      defaultValue: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        defaultCity: '郑州',
        // 地图对象
        map: null,
        // 定位默认地址 | 搜索后选择的地址
        formattedAddress: null,
        // 地址对应的经纬度信息
        position: {},
        // 检索关键字
        searchValue: '',
        // 检索函数对象
        placeSearch: null,
        // 检索结果数据数据
        searchInfoList: [],
        // 地图标记
        marker: '',
        // 地址解析（正向）
        geocoder: '',
        // 地址名称
        name: ''
      };
    },
    watch: {
      defaultValue() {
        this.searchValue = this.defaultValue;
      }
    },
    mounted() {
      // 初始化地图页面
      this.initMap();
    },
    beforeDestroy() {
      // 销毁地图
      this.map.destroy();
    },
    methods: {
      //   初始化地图页面
      initMap() {
        this.map = new AMap.Map('custom-amap', {
          resizeEnable: true,
          zoom: 50
        });
        // 添加工具栏
        this.map.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.OverView'], () => {
          // 工具条
          const toolbar = new AMap.ToolBar();
          // 比例尺
          const scale = new AMap.Scale();
          // 显示鹰眼
          const overView = new AMap.OverView();
          this.map.addControl(toolbar);
          this.map.addControl(scale);
          this.map.addControl(overView);
        });
        // 添加maker
        this.setMaker();
        // 添加鼠标点选地图选择地址
        this.addAmapGeocoder();
        // 添加定位
        this.addAMapGeolocation();
        // 添加检索提示
        this.addAMapAutocompletePlaceSearch();
      },
      // 添加maker
      setMaker() {
        this.marker = new AMap.Marker();
        this.map.add(this.marker);
        // 添加解析地理位置插件
        this.map.plugin('AMap.Geocoder', () => {
          // 异步加载插件
          this.geocoder = new AMap.Geocoder({
            city: this.defaultCity, // 默认：“全国”
            radius: 1000 // 范围，默认：500
          });
        });
      },
      // 添加鼠标点选地图选择地址
      addAmapGeocoder() {
        // 添加maker
        this.setMaker();
        // 地图添加点击事件
        this.map.on('click', e => {
          const lnglat = [e.lnglat.lng, e.lnglat.lat];
          this.marker.setPosition(lnglat);
          this.geocoder.getAddress(lnglat, (status, result) => {
            if (status === 'complete' && result.regeocode) {
              const res = result.regeocode;
              const data = {
                // 地址名称
                adress: res.formattedAddress,
                // 纬度lat
                lat: lnglat[1],
                // 经度lng
                lng: lnglat[0]
              };
              this.formattedAddress = res.formattedAddress;
              this.position = data;
            } else {
              alert(JSON.stringify(result));
            }
          });
        });
      },
      // 添加自动定位
      addAMapGeolocation() {
        this.map.plugin('AMap.Geolocation', () => {
          const geolocation = new AMap.Geolocation({
            // 是否使用高精度定位，默认：true
            enableHighAccuracy: true,
            // 设置定位超时时间，默认：无穷大
            timeout: 10000,
            // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
            buttonOffset: new AMap.Pixel(200, 200),
            //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            zoomToAccuracy: true,
            //  定位按钮的排放位置,  RB表示右下
            buttonPosition: 'RB'
          });
          // 获取当前位置
          geolocation.getCurrentPosition();
          // 添加定位当前城市成功监听
          AMap.event.addListener(
            geolocation,
            'complete',
            this.onCurrentPositionComplete
          );
          // 添加定位当前城市发生错误监听
          AMap.event.addListener(
            geolocation,
            'error',
            this.onCurrentPositionError
          );
        });
      },
      // 添加检索提示检索
      addAMapAutocompletePlaceSearch() {
        // 自动提示
        this.map.plugin('AMap.Autocomplete', () => {
          const auto = new AMap.Autocomplete({
            city: this.defaultCity,
            input: 'search-input'
          });
          // 添加检索监听
          AMap.event.addListener(auto, 'select', this.onSelectAutocomplete);
        });
        // 检索服务
        AMap.service(['AMap.PlaceSearch'], () => {
          // 构造地点查询类
          this.placeSearch = new AMap.PlaceSearch({
            type: '', // 兴趣点类别
            pageSize: 5, // 单页显示结果条数
            pageIndex: 1, // 页码
            city: this.defaultCity, // 兴趣点城市
            citylimit: false, // 是否强制限制在设置的城市内搜索
            map: this.map, // 展现结果的地图实例
            panel: 'searchResultPanel', // 结果列表将在此容器中进行展示。
            autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
          });
        });
        // 添加检索监听
        AMap.event.addListener(
          this.placeSearch,
          'listElementClick',
          this.onSelectSearch
        );
      },
      // 定位当前城市成功回调
      onCurrentPositionComplete(res) {
        // 添加maker
        this.setMaker();
        const lnglat = [res.position.lng, res.position.lat];
        this.marker.setPosition(lnglat);
        console.log(res, 'res');
        this.formattedAddress = res.formattedAddress;
        this.position = res.position;
      },
      // 定位当前城市发生错误回调
      onCurrentPositionError(err) {
        console.log(err);
      },
      // 按钮触发检索
      handelSearch() {
        this.placeSearch.search(this.searchValue, (status, info) => {
          this.searchInfoList = info.poiList.pois;
        });
      },
      // 选择自动提示数据事件回调
      onSelectAutocomplete(e) {
        this.searchValue = e.poi.name;
        this.handelSearch();
      },
      // 选择检索数据结果事件回调
      onSelectSearch(e) {
        const res = e.data;
        this.formattedAddress = res.cityname + res.adname + res.address;
        this.name = res.name;
        this.position = res.location;
      },
      // 清除input里的值，清除搜索结果，再次初始化map
      handelclearInput() {
        document.querySelector('#searchResultPanel').innerHTML = '';
      },
      // 保存当前选择的地址,分发事件
      handelSave() {
        this.searchValue = this.formattedAddress;
        const { lat, lng } = this.position;
        const data = {
          name: this.name,
          // 地址名称
          address: this.formattedAddress,
          // 纬度lat
          lat,
          // 经度lng
          lng
        };
        this.$emit('getPosition', data);
      }
    }
  };
</script>

<style lang="scss">
  #amap-container {
    .el-input__clear {
      line-height: 34px;
      // top: 20px;
    }
    #custom-amap {
      height: 50vh;
      width: 100%;
      margin-top: 10px;
      border: 1px solid #ccc;
    }
    .input-with {
      // position: fixed;
      // top: 40px;
      z-index: 1;
      width: 100%;
    }
    .address {
      color: #373737;
    }
  }
  .amap-sug-result {
    z-index: 99999;
  }
</style>
